<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端页面</title>
</head>
<body>
<div class="image-container">
    <img id="displayedImage" style="width: 100%; height: 100%;" src="file://media/Photo/1/IMG_1739946609_000/IMG_000.jpg">
    <!--    -->
</div>



<div class="button-container">
    <button type="button" onclick="openPhoto()">打开相册</button>
    <button type="button" onclick="openCamera()">调用鸿蒙原生摄像头</button>
    <button type="button" onclick="dbConnection()">插入数据到数据库</button>

    <span id="mySpan">我是span标签</span>
</div>
</body>

<script>

    // H5调用鸿蒙原生相册
    function openPhoto() {
        webJSCallObject.openPhoto();
    }
    // H5调用鸿蒙原生摄像头
    function openCamera() {
        webJSCallObject.openCamera();
    }

    // H5调用鸿蒙插入数据方法
    function dbConnection() {
        const spanElement = document.getElementById('mySpan');
        webJSCallObject.dbConnection(spanElement.innerHTML);
    }

    // 接收鸿蒙端传递的 Base64 图片数据并显示
    function displayImage(base64Image) {
        const imgElement = document.getElementById('displayedImage');
        const image = "data:image/jpeg;base64," + base64Image;
        imgElement.src = image;
    }

    // 原生按钮调用H5方法
    function changeSpanText(text) {
        const spanElement = document.getElementById('mySpan');
        spanElement.innerHTML = '原生按钮调用H5方法修改span标签，修改内容：' + text;
    }




</script>

<style>
    /* 基础样式 */
    body {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100vh;
        font-family: Arial, sans-serif;
    }

    /* 图片容器 */
    .image-container {
        margin-top: 50px;
        text-align: center;
        max-width: 60vw;
        max-height: 60vw;
        background-color: gray;
    }

    /* 按钮容器 */
    .button-container {
        margin-top: 30px;
        width: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 按钮样式 */
    .button-container button {
        width: 100%;
        max-width: 300px;
        padding: 15px;
        margin: 10px 0;
        border: none;
        border-radius: 5px;
        background-color: #007bff;
        color: white;
        font-size: 16px;
    }
</style>

</html>